<template>
  <div>
    <van-nav-bar fixed title="股东分红奖励" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top pos-r mlr-25">
      <!-- <div class="mtb-25 flex-sa-c">
        <div :class="RewardType === 0 ? 'btn solid-btn' : 'btn'" @click="changeType(0)">等级分红</div>
        <div :class="RewardType === 1 ? 'btn solid-btn' : 'btn'" @click="changeType(1)">用户分红</div>
      </div> -->
      <div v-for="(item,index) in RewardList" :key="index" class="bg-white mtb-20 br-12 pd-25">
        <div class="flex-s-c">
          <div>
            <p class="fs-32 color-black">{{ item.Name }}</p>
            <p class="fs-20 color-gray">{{ item.StartTime.split(' ')[0] }} 至 {{ item.EndTime.split(' ')[0] }}</p>
          </div>
          <div v-if="item.Status===0" class="state-box bg-danger">· 未生成</div>
          <div v-if="item.Status===1" class="state-box bg-warning">· 已生成</div>
          <div v-if="item.Status===2" class="state-box bg-success">· 已结算</div>
        </div>
        <div v-if="item.RewardList&&item.RewardList.length>0" class="br-12 pd-25 bg-blue-light mt-25">
          <div class="flex-s-c">
            <div class="total-box bg-blue">
              <p>分红总额</p>
              <p class="fs-36 fw-b tar">{{ item.RewardList[0].TotalReward.toFixed(2) }}</p>
            </div>
            <div class="total-box bg-red">
              <p>分红总积分</p>
              <p class="fs-36 fw-b tar">{{ item.RewardList[0].TotalReward }}</p>
            </div>
          </div>
          <div v-for="(ite,inde) in item.RewardList" :key="inde" class="mt-25 ">
            <p class="fs-28 fw-b color-black">{{ ite.GradeName }}</p>
            <div class="mt-10 bg-white flex-sa-c br-12 ptb-25 plr-20 fs-24">
              <div class="item-box">
                <p>总分红金额</p>
                <p class="color-blue fw-b">{{ ite.GradeTotalReward.toFixed(2) }}</p>
              </div>
              <div class="item-box">
                <p>每人金额</p>
                <p class="color-blue fw-b">{{ ite.PeerReward.toFixed(2) }}</p>
              </div>
              <div class="item-box">
                <p>分红积分</p>
                <p class="color-blue fw-b">{{ ite.GradeTotalIntegral }}</p>
              </div>
              <div class="item-box">
                <p>每人积分</p>
                <p class="color-blue fw-b">{{ ite.PeerIntegral }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetAccountPeriodMobile } from 'api/PerformanceBonus'
export default {
  components: {},
  data() {
    return {
      RewardType: 0,

      RewardList: [],
      requestData: {
        PageIndex: 1,
        PageSize: 10,
        type: 0
      },

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  watch: {},
  created() {
    this.GetAccountPeriodMobile()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    changeType(index) {
      this.RewardType = index
    },
    GetAccountPeriodMobile() {
      GetAccountPeriodMobile(this.requestData).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              this.RewardList.push(tem)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight() - this.$utils.getClientHeight() - this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          console.log('加载')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetAccountPeriodMobile()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  width: 256px;
  height: 64px;
  line-height: 64px;
  border-radius: 32px;
  text-align: center;
  font-size: 28px;
}
.state-box {
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 24px;
  color: $colorF;
  height: 42px;
  line-height: 42px;
  padding: 0 20px;
  text-align: center;
  border-radius: 21px;
}
.total-box {
  color: $colorF;
  border-radius: 12px;
  padding: 15px 20px 10px;
  width: calc(50% - 12px);
}
.item-box {
  flex: 1;
  text-align: center;
}
.bg-blue {
  background: #5972f6;
}
.color-blue {
  color: #5972f6;
}
.bg-red {
  background: #ff5354;
}
.color-red {
  color: #ff5354;
}
</style>
